<template>
  <!-- 年龄比例 -->
  <div class="echarts">
    <ECharts
      :option="option"
      width="800"
      height="800"
      :resize="false"
      :onClick="handlePieClick"
    />
  </div>
  <el-drawer
    v-model="showDrawer"
    title="数据详情"
    size="80%"
    direction="rtl"
    :close-on-click-modal="true"
    @close="closeDraw"
  >
    <el-table :data="projectData" style="width: 100%" class="mb-5">
      <el-table-column
        fixed
        prop="incorporation"
        show-overflow-tooltip
        label="单位"
        width="230"
      />
      <el-table-column prop="address" label="属地" width="200" />
      <el-table-column prop="project" label="项目 or 其他" />
      <el-table-column prop="amount" label="金额 or 其他" />
      <el-table-column prop="year" label="批次" width="120" />
      <el-table-column label="来源" width="100">
        <template #default="scoped">
          <el-button
            type="primary"
            plain
            @click="goDetailPage(scoped.row.source, '1')"
            >来源</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
</template>

<script setup lang="ts">
import ECharts from "../index.vue";
import { defineEmits } from "vue";
import { usePieHook } from "./hooks";

interface Props {
  data: any;
  info: any;
}

const props = withDefaults(defineProps<Props>(), {
  data: [],
  info: { title: "透策数据分析", desc: "占位内容" }
});

const emits = defineEmits(["querySubPieData"]);

const {
  option,
  projectData,
  handlePieClick,
  showDrawer,
  closeDraw,
  goDetailPage
} = usePieHook(props, emits);
</script>
<style lang="postcss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
